<template>
  <ph-view>
    <ph-tab>
      <ph-tab-panel title="案例展示">
<<<<<<< HEAD
        <ph-flex justify="space-around" dir="row" style="width: 300px">
=======
        <ph-flex justify="space-around" dir="row" style="width: 290px">
>>>>>>> dev
          <label>婚否</label>
          <ph-switch :value="married" @change="onMarriageChange" />
        </ph-flex>
        <ph-flex justify="space-around" dir="row" style="width: 290px">
          <label>年满18？</label>
          <ph-switch
            :value="married"
            @change="onMarriageChange"
            :disabled="true"
          />
        </ph-flex>
      </ph-tab-panel>
      <ph-tab-panel title="template">
        <ph-pretty>{{ demo1 }}</ph-pretty>
        <ph-pretty>{{ demo2 }}</ph-pretty>
      </ph-tab-panel>
      <ph-tab-panel title="基本介绍">
        <ph-pretty>{{ baseUsage }}</ph-pretty>
      </ph-tab-panel>
    </ph-tab>
  </ph-view>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import { PhFlex, PhSwitch, PhTabPanel, PhTab, PhView } from "@/index";
import * as Data from "../data/switch";
export default defineComponent({
  components: { PhFlex, PhSwitch, PhTabPanel, PhTab, PhView },
  setup() {
    const married = ref(false);
    const onMarriageChange = (v: boolean) => {
      console.log(v);
      married.value = v;
    };
    return {
      married,
      onMarriageChange,
      ...Data,
    };
  },
});
</script>
